<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.mobile" placeholder="手机号" style="width: 200px;"  class="filter-item" />
      <el-select v-model="listQuery.status" placeholder="状态" class="filter-item" style="width: 120px;margin-left: 10px;">
        <el-option v-for="item in [0,1,2,3]" :key="item" :label="item | statusFilter" :value="item" />
      </el-select>
      <el-button type="primary" class="filter-item" style="margin-left: 40px;" @click="getOrders">查询</el-button>
    </div>
    <el-table :data="orders" style="width: 100%;margin-top:30px;" border >
      <el-table-column align="center" label="#" width="50">
        <template v-slot="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单编号">
        <template v-slot="scope">
          {{ scope.row.sn }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="套餐名称" >
        <template v-slot="scope">
          {{ scope.row.product.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="联系方式" >
        <template v-slot="scope">
          {{ scope.row.mobile }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订购数量">
        <template v-slot="scope">
          {{ scope.row.order_count }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="短信总数" >
        <template v-slot="scope">
          {{ scope.row.total_msg_count }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="短信剩余" >
        <template v-slot="scope">
          {{ scope.row.left_count }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单总额" >
        <template v-slot="scope">
          {{ scope.row.total_price }}元
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" >
        <template v-slot="scope">
          {{ scope.row.status | statusFilter}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="下单时间" >
        <template v-slot="scope">
          {{ scope.row.created_at | formatDate }}
        </template>
      </el-table-column>
      <el-table-column align="center"    label="操作" width="200">
        <template v-slot="{row}">
          <el-button v-if="checkPermission('短信订单发货') && row.status === 1"  size="mini"  type="success"
                      @click="handleOrderPaid(row)">
            发货
          </el-button>
          <el-button v-if="row.status === 1"  size="mini"  type="danger"
                     @click="handleOrderCancel(row)">
            取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0"  :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getOrders" />
  </div>
</template>

<script>
import {cancelSmsOrder, getSmsOrder, paidSmsOrder} from '@/api/sms'
import moment from "moment/moment";
import {checkPermission} from "@/utils/permission";
import Pagination from "@/components/Pagination/index.vue";

export default {
  name: 'SmsOrder',
  components: {Pagination},
  data() {
    return {
      orders: [],
      total:0,
      listQuery:{
        page: 1,
        pageSize: 100,
        status:0,
        mobile:'',
      },
      dialogVisible: false,
      dialogType: 'new'
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: '订单状态',
        1: '待发货',
        2: '已发货',
        3: '已取消'
      }
      return statusMap[status]
    },
    formatDate(dateStr) {
      return moment(dateStr).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  created() {
    this.getOrders()
  },
  methods: {
    checkPermission,
    async getOrders() {
      const res = await getSmsOrder(this.listQuery)
      this.orders = res.data.list
      this.total = res.data.total
    },
    handleOrderCancel(row) {
      this.$confirm('确定取消订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelSmsOrder(row).then(resp => {
          if(resp.code === 20000) {
            this.$message.success('取消成功')
            row.status = 3
          }
        })
      }).catch(err => {
        this.$message({
          type: 'info',
          message: err
        });
      });
    },
    handleOrderPaid(row) {
      this.$confirm('确定发货吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        paidSmsOrder(row).then(resp => {
          if(resp.code === 20000) {
            this.$message.success('发货成功')
            row.status = 2
          }
        })
      }).catch(err => {
       this.$message(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
